<template>
	<view class="home">
		<!-- 自定义组件 -->
		<!-- 导航搜索栏 -->
		<navbar></navbar>
		<!-- tab -->
		<tab :list="tabList" @tab="tabClick" :tabIndex="tabIndex"></tab>

		<!-- 文章列表 -->
		<view class="home-list">
			<!-- <list :tab="tabList" @changeSwiper="changeArticleList" :activeIndex="activeIndex"></list> -->
			<list :tabData="tabList" @changeSwiper="changeArticleList" :activeIndex="tabIndex"></list>

		</view>

	</view>
</template>

<script>
	import navbar from "@/components/navbar/navbar.vue";
	import tab from "@/components/tab/tab.vue";
	import list from "@/components/list/list.vue";

	export default {
		components: {
			navbar,
			tab,
			list

		},
		data() {
			return {
				tabList: [],
				tabIndex: 0,
				// activeIndex: 0
			}
		},
		onLoad() {
			this.getLabel();
		},
		methods: {
			getLabel() {
				/* async getLabel() {
				let res = await uniCloud.callFunction({
					name: 'get_label'
				});
				const {
					result
				} = res;
				this.tabList = result.data; */
				// 调用-云函数
				/* uniCloud.callFunction({
					name: 'get_label'
				}).then((res) => {
					const {
						result
					} = res;
					this.tabList = result.data;
					console.log(this.tabList);
				}); */

				this.$api.get_label({
					name: 'get_label'
				}).then((res) => {
					const {
						data
					} = res;
					// console.log('标签 ', data);
					data.unshift({
						name: '全部'
					})
					this.tabList = data;
				});

			},
			tabClick({
				data,
				index
			}) {
				// console.log(data, index);
				// 点击上面的tab组件时，接受tab事件,获取的index值传给文章list组件
				// this.activeIndex = index;
				// 直接将tabIndex修改赋值也可以啊？！为啥还要建立新变量？
				this.tabIndex = index;
			},
			// 接收子组件list发送的changeSwiper事件，当文章list的index修改时，将index赋值给tab导航联动
			changeArticleList(current) {
				// console.log('当前swiper的值', current);
				this.tabIndex = current;
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		display: flex;
	}

	.home {
		display: flex;
		flex-direction: column;
		flex: 1;
		// background-color: pink;
		overflow: hidden;

		.home-list {
			flex: 1;
			box-sizing: border-box;
			// border: 1px red solid;
		}
	}
</style>
